<template>
  <!-- 标准检验预检单表单弹窗 -->
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    :title="props.title"
    width="1200px"
    draggable
    @close="closeDialog"
  >
    <el-divider content-position="left"
      ><span style="font-weight: bold; font-size: 16px"
        >标准作业项</span
      ></el-divider
    >
    <el-descriptions
      class="margin-top w-full"
      title=""
      :column="4"
      size="large"
      border
      style="margin-bottom: 20px"
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">产品号</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.productName || "" }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">工序</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.processName || "" }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">作业编号</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.standardCode || "" }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">作业名称</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.standardName || "" }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">编制人</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.standardCompilePersonnel || "" }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">审核人</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.standardExaminePersonnel || "" }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">批准人</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.standardRatifyPersonnel || "" }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">备注</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ formData.remarks || "暂无备注" }}
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <el-table
      ref="dataTableRef"
      :data="sopItemList"
      highlight-current-row
      border
      max-height="160px"
    >
      <el-table-column
        label="作业项编号"
        prop="sopItemCode"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="作业项名称"
        prop="sopItemName"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="标准值类型"
        prop="standardValue"
        min-width="100"
        show-overflow-tooltip
        align="center"
      >
        <template #default="{ $index, row }">
          {{ useDictionary("standardValue", row.standardValue) }}
        </template>
      </el-table-column>
      <el-table-column
        label="上限值"
        prop="standardMaxValue"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="下限值"
        prop="standardMinValue"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="附件内容"
        prop="images"
        min-width="75"
        show-overflow-tooltip
      >
        <template #default="{ $index, row }">
          <div style="display: flex; flex-wrap: wrap">
            <span v-for="(item, index) in row.images" :key="index">
              <img
                :src="`${upPreviewUrl}${item.url}`"
                style="
                  width: 30px;
                  height: 30px;
                  margin-right: 10px;
                  cursor: pointer;
                "
                @click="handlePictureCardPreview(`${upPreviewUrl}${item.url}`)"
                alt=""
              />
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-divider content-position="left" style="margin-top: 50px"
      ><span style="font-weight: bold; font-size: 16px"
        >标准检验规则</span
      ></el-divider
    >
    <el-descriptions
      class="margin-top w-full"
      title=""
      :column="3"
      size="large"
      border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">规则编号</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ ruleFormData.ruleCode || "" }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">规则名称</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ ruleFormData.ruleName || "" }}
        </div>
      </el-descriptions-item>
      <!-- <el-descriptions-item>
        <template #label>
          <div class="cell-item">操作类型</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ useDictionary("CheckOperateType", ruleFormData.opeTypeCode) }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">事务类型</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ getEffectTypeCode(ruleFormData) }}
        </div>
      </el-descriptions-item> -->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">规则级别</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ useDictionary("EffectLevel", ruleFormData.effectLevelCode) }}
        </div>
      </el-descriptions-item>
      <!-- <el-descriptions-item>
        <template #label>
          <div class="cell-item">检验类型</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ ruleFormData.checkTypeName || "" }}
        </div>
      </el-descriptions-item> -->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">连续抽检个数</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ ruleFormData.checkNum || "" }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">抽检频率次</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ ruleFormData.checkFrequency || "" }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">周期个数</div>
        </template>
        <div style="width: 100%; word-break: break-all">
          {{ ruleFormData.weekNum || "" }}
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary";
import { useDictionary } from "@/utils/useTable";
import { checkCommon } from "@/views/qms/checkHook/checkCommon"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "QMSQMSCHECKPREITEMRULEDETAIL",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const uploadApi = import.meta.env.VITE_APP_BASE_API;
// 预览url前缀
const upPreviewUrl = `${uploadApi}/system/fileCenter/preview/`;
const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  ruleData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { handlePictureCardPreview, getEffectTypeCode } = checkCommon();
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);

let formData = reactive({
  id: "",
  remarks: "",
  standardCode: "",
  standardName: "",
  sopTypeId: "",
  equipTypeId: "",

  standardPersonnel: "",
  standardCompilePersonnel: "",
  standardExaminePersonnel: "",
  standardRatifyPersonnel: "",
  productName: "",
  processName: "",
});

let ruleFormData = reactive({
  ruleCode: "",
  ruleName: "",
  opeTypeCode: "",
  effectTypeCode: "",
  effectLevelCode: "",
  checkTypeName: "",
  checkNum: "",
  checkFrequency: "",
  weekNum: "",
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        remarks,
        standardCode,
        standardName,
        sopTypeId,
        equipTypeId,
        standardPersonnel,
        standardCompilePersonnel,
        standardExaminePersonnel,
        standardRatifyPersonnel,
        productName,
        processName,
        images,
      } = newVal;
      Object.assign(formData, {
        id,
        remarks,
        standardCode,
        standardName,
        sopTypeId,
        equipTypeId,
        standardPersonnel,
        standardCompilePersonnel,
        standardExaminePersonnel,
        standardRatifyPersonnel,
        productName,
        processName,
        images: images ?? [],
      });
      getStandard();
    } else {
      formData.images = [];
    }
  }
);
watch(
  () => props.ruleData,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      Object.assign(ruleFormData, newVal);
    }
  }
);
const sopItemList = ref([]);
const getStandard = async () => {
  const { data } = await request({
    url: "/qms/qmssopitem/getList",
    method: "post",
    data: {
      standardId: formData.id,
    },
  });
  sopItemList.value = data;
};

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formData.id = "";
  formData.remarks = "";
  formData.standardCode = "";
  formData.standardName = "";
  formData.sopTypeId = "";
  formData.equipTypeId = "";
  formData.standardPersonnel = "";
  formData.standardCompilePersonnel = "";
  formData.standardExaminePersonnel = "";
  formData.standardRatifyPersonnel = "";
  formData.productName = "";
  formData.processName = "";

  ruleFormData.ruleCode = "";
  ruleFormData.ruleName = "";
  ruleFormData.opeTypeCode = "";
  ruleFormData.effectTypeCode = "";
  ruleFormData.effectLevelCode = "";
  ruleFormData.checkTypeName = "";
  ruleFormData.checkNum = "";
  ruleFormData.checkFrequency = "";
  ruleFormData.weekNum = "";
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>
